<extend name="Base/common"/>

<block name="style">
  <link rel="stylesheet" href="__CSS__/ui.css">
</block>

<block name="header">
  <!-- navbar-default -->
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="javascript:void(0)">极铺商城专营店</a>
      </div>
      <div class="navbar-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="javascript:void(0)">首页</a></li>
          <li><a href="javascript:void(0)">苹果</a></li>
          <li><a href="javascript:void(0)">葡萄</a></li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control empty" placeholder="搜索您需要的商品">
            <a href="" class="icon icon-search"></a>
          </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="javascript:void(0)">Link</a></li>
          <li><a href="javascript:void(0)">Link</a></li>
        </ul>
      </div>
    </div>
  </div>
</block>

<block name="body">

  <!-- JS组件 -->
  <div class="page-header">
    <h1>JS组件</h1>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <a href="javascript:$.ui.success('操作成功&#9786;');" class="btn btn-positive">UI.success</a>
      <a href="javascript:$.ui.error('操作失败&#9785;');" class="btn btn-negative">UI.error</a>
      <a href="javascript:$.ui.confirm('您确定要进行此操作？', doConfirm);" class="btn">UI.confirm</a>
      <a href="javascript:$.ui.load($.U('Demo/ajaxLogin'), '快速登录');" class="btn">UI.load</a>
    </div>
  </div>


  <div class="page-header">
    <h1>Core</h1>
  </div>

  <!-- Grid -->
  <div class="page-header">
    <h2>Grid</h2>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="grid-box">col-xs-12</div>
    </div>

    <div class="col-xs-4">
      <div class="grid-box">col-xs-12</div>
    </div>
    <div class="col-xs-8">
      <div class="grid-box">col-xs-12</div>
    </div>

    <div class="col-xs-4">
      <div class="grid-box">col-xs-4</div>
    </div>
    <div class="col-xs-4">
      <div class="grid-box">col-xs-4</div>
    </div>
    <div class="col-xs-4">
      <div class="grid-box">col-xs-4</div>
    </div>

    <div class="col-xs-3">
      <div class="grid-box">col-xs-3</div>
    </div>
    <div class="col-xs-3">
      <div class="grid-box">col-xs-3</div>
    </div>
    <div class="col-xs-3">
      <div class="grid-box">col-xs-3</div>
    </div>
    <div class="col-xs-3">
      <div class="grid-box">col-xs-3</div>
    </div>
  </div>


  <!-- Tables -->
  <div class="page-header">
    <h2>Tables</h2>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <h4>默认表格</h4>
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-xs-12">
      <h4>table-striped</h4>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="col-xs-12">
      <h4>table-bordered</h4>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>Mark</td>
            <td>Otto</td>
            <td>@TwBootstrap</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-xs-12">
      <h4>table-condensed</h4>
      <table class="table table-condensed">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>


  <!-- Forms -->
  <div class="page-header">
    <h1>Forms</h1>
  </div>
  <div class="row">
    <!-- 基础表单 -->
    <div class="col-xs-5">
      <h4>基础表单</h4>
      <div class="well">
        <form>
          <fieldset>
            <legend>Legend</legend>
            <div class="form-group">
              <label for="inputEmail">邮箱</label>
              <input type="email" class="form-control" id="inputEmail" placeholder="请您输入邮箱">
            </div>
            <div class="form-group">
              <label for="inputPassword">密码</label>
              <input type="password" class="form-control" id="inputPassword" placeholder="请您输入密码">
              <div class="checkbox">
                <label>
                  <input type="checkbox"> 记住我，下次自动登录
                </label>
              </div>
            </div>
            <div class="form-group">
              <label for="inputFile">上传文件</label>
              <input type="text" readonly class="form-control floating-label" placeholder="浏览...">
              <input type="file" id="inputFile" multiple>
            </div>
            <div class="form-group">
              <label for="textArea">详细内容</label>
              <textarea class="form-control" rows="3" id="textArea"></textarea>
              <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
            </div>
            <div class="form-group">
              <label>单选框</label>
              <div class="radio radio-primary">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
                  Option one is this
                </label>
              </div>
              <div class="radio radio-primary">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                  Option two can be something else
                </label>
              </div>
            </div>
            <div class="form-group">
              <label for="select">下拉框</label>
              <select class="form-control" id="select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <br>
              <select multiple="" class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
            <div class="form-group">
              <button class="btn btn-positive">提交</button>
              <button type="submit" class="btn">取消</button>
            </div>
          </fieldset>
        </form>
      </div>
    </div>

    <div class="col-xs-2"></div>

    <!-- 水平排列的表单 -->
    <div class="col-xs-5">
      <h4>水平排列的表单</h4>
      <div class="well">
        <form class="form-horizontal">
          <fieldset>
            <legend>Legend</legend>
            <div class="form-group">
              <label for="inputEmail" class="col-xs-3 control-label">邮箱</label>
              <div class="col-xs-8">
                <input type="email" class="form-control" id="inputEmail" placeholder="邮箱">
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword" class="col-xs-3 control-label">密码</label>
              <div class="col-xs-8">
                <input type="password" class="form-control" id="inputPassword" placeholder="密码">
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> Checkbox
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="inputFile" class="col-xs-3 control-label">上传文件</label>
              <div class="col-xs-8">
                <input type="text" readonly class="form-control floating-label" placeholder="浏览...">
                <input type="file" id="inputFile" multiple>
              </div>
            </div>
            <div class="form-group">
              <label for="textArea" class="col-xs-3 control-label">Textarea</label>
              <div class="col-xs-8">
                <textarea class="form-control" rows="3" id="textArea"></textarea>
                <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
              </div>
            </div>
            <div class="form-group">
              <label class="col-xs-3 control-label">Radios</label>
              <div class="col-xs-8">
                <div class="radio radio-primary">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
                    Option one is this
                  </label>
                </div>
                <div class="radio radio-primary">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    Option two can be something else
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="select" class="col-xs-3 control-label">Selects</label>
              <div class="col-xs-8">
                <select class="form-control" id="select">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                <br>
                <select multiple="" class="form-control">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-xs-8 col-xs-offset-4">
                <button class="btn btn-positive">提交</button>
                <button type="submit" class="btn">取消</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>

    <!-- 内联表单 -->
    <div class="col-xs-12">
      <h4>水平排列的表单</h4>
      <div class="well">
        <form class="form-inline">
          <div class="form-group">
            <label class="sr-only" for="exampleInputEmail3">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
          </div>
          <div class="form-group">
            <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
            <div class="input-group">
              <div class="input-group-addon">$</div>
              <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
              <div class="input-group-addon">.00</div>
            </div>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
          <button type="submit" class="btn btn-positive">Sign in</button>
        </form>
      </div>
    </div>
  </div>


  <!-- Buttons -->
  <div class="page-header">
    <h1>Buttons</h1>
  </div>
  <div class="row">
    <!-- Default buttons -->
    <div class="col-xs-6">
      <h2>Default buttons</h2>
      <h4>btn</h4>
      <button type="button" class="btn btn-default">Default</button>
      <!-- <button type="button" class="btn btn-positive">Primary</button> -->
      <button type="button" class="btn btn-positive">Positive</button>
      <button type="button" class="btn btn-negative">Negative</button>
      <button type="button" class="btn btn-link">Link</button>

      <h4>btn-sm</h4>
      <button type="button" class="btn btn-sm btn-default">Default</button>
      <!-- <button type="button" class="btn btn-sm btn-primary">Primary</button> -->
      <button type="button" class="btn btn-sm btn-positive">Positive</button>
      <button type="button" class="btn btn-sm btn-negative">Negative</button>
      <button type="button" class="btn btn-sm btn-link">Link</button>

      <h4>btn-xs</h4>
      <button type="button" class="btn btn-xs btn-default">Default</button>
      <!-- <button type="button" class="btn btn-xs btn-primary">Primary</button> -->
      <button type="button" class="btn btn-xs btn-positive">Positive</button>
      <button type="button" class="btn btn-xs btn-negative">Negative</button>
      <button type="button" class="btn btn-xs btn-link">Link</button>
    </div>

    <!-- Block buttons -->
    <div class="col-xs-6">
      <h2>Block buttons</h2>
      <button type="button" class="btn btn-block btn-default">Default</button>
      <button type="button" class="btn btn-block btn-positive">Positive</button>
      <button type="button" class="btn btn-block btn-negative">Negative</button>
      <button type="button" class="btn btn-block btn-link">Link</button>
    </div>

    <!-- Disabled buttons -->
    <div class="col-xs-6">
      <h2>Disabled buttons</h2>
      <button type="button" class="btn btn-default disabled">Default</button>
      <!-- <button type="button" class="btn btn-positive disabled">Primary</button> -->
      <button type="button" class="btn btn-positive disabled">Positive</button>
      <button type="button" class="btn btn-negative disabled">Negative</button>
    </div>
  </div>

  
  <!-- Components -->
  <div class="page-header">
    <h1 id="Components">Components</h1>
  </div>

  <!-- Navbar -->
  <div class="page-header">
    <h2 id="navbar">Navbar</h2>
  </div>
  <!-- navbar-default -->
  <div class="navbar navbar-default">
    <div class="navbar-header">
      <a class="navbar-brand" href="javascript:void(0)"><i class="icon icon-sort"></i> 全部商品分类</a>
    </div>
    <div class="navbar-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">苹果</a></li>
        <li><a href="javascript:void(0)">葡萄</a></li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control col-xs-8 empty" placeholder="搜索您需要的商品">
          <a href="" class="icon icon-search"></a>
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="javascript:void(0)">Link</a></li>
      </ul>
    </div>
  </div>

  <!-- navbar-inverse -->
  <div class="navbar navbar-inverse">
    <div class="navbar-header">
      <a class="navbar-brand" href="javascript:void(0)"><i class="icon icon-sort"></i> 全部商品分类</a>
    </div>
    <div class="navbar-collapse collapse navbar-inverse-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">苹果</a></li>
        <li><a href="javascript:void(0)">葡萄</a></li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control col-xs-8 empty" placeholder="搜索您需要的商品">
          <a href="" class="icon icon-search"></a>
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="javascript:void(0)">Link</a></li>
        <li><a href="javascript:void(0)">Link</a></li>
      </ul>
    </div>
  </div>

  <!-- Navs -->
  <div class="page-header">
    <h2 id="container">Navs</h2>
  </div>
  <!-- Tabs -->
  <h3 id="nav-tabs">Nav-tabs</h3>
  <ul class="nav nav-tabs" style="margin-bottom: 15px;">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#account" data-toggle="tab">Account</a></li>
    <li class="disabled"><a>Disabled</a></li>
  </ul>
  <div id="myTabContent" class="tab-content">
    <div class="tab-pane fade active in" id="home">
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    </div>
    <div class="tab-pane fade" id="profile">
      <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
    </div>
    <div class="tab-pane fade" id="account">
      <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
    </div>
  </div>

  <!-- Breadcrumbs -->
  <div class="row">
    <div class="col-xs-12">
      <h2 id="nav-breadcrumbs">Breadcrumbs</h2>
      <ul class="breadcrumb">
        <li class="active">首页</li>
      </ul>
      <ul class="breadcrumb">
        <li><a href="javascript:void(0)">首页</a></li>
        <li class="active">干果</li>
      </ul>

      <ul class="breadcrumb">
        <li><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">干果</a></li>
        <li class="active">夏威夷果</li>
      </ul>
    </div>
  </div>

  <!-- Page & Pager -->
  <div class="row">
    <!-- Page -->
    <div class="col-xs-12">
      <h2 id="page">Page</h2>
      <ul class="page">
        <h4>page</h4>
        <li class="disabled"><a href="javascript:void(0)">&laquo;</a></li>
        <li class="active"><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
        <li><a href="javascript:void(0)">&raquo;</a></li>
      </ul>
      <ul class="page page-sm">
        <h4>page-sm</h4>
        <li class="disabled"><a href="javascript:void(0)">&laquo;</a></li>
        <li class="active"><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
        <li><a href="javascript:void(0)">&raquo;</a></li>
      </ul>
    </div>
    <!-- Pager -->
    <div class="col-xs-6">
      <h2 id="pager">Pager</h2>
      <ul class="pager">
        <li><a href="javascript:void(0)">上一篇</a></li>
        <li><a href="javascript:void(0)">下一篇</a></li>
      </ul>

      <ul class="pager">
        <li class="previous disabled"><a href="javascript:void(0)">&larr; 上一篇</a></li>
        <li class="next"><a href="javascript:void(0)">下一篇 &rarr;</a></li>
      </ul>
    </div>
  </div>

  <!-- Labels & Badges -->
  <div class="row">
    <div class="col-xs-12">
      <h2>Labels</h2>
      <span class="label">Default</span>
      <!-- <span class="label label-primary">Primary</span> -->
      <span class="label label-positive">Positive</span>
      <!-- <span class="label label-warning">Warning</span> -->
      <!-- <span class="label label-info">Info</span> -->
      <span class="label label-negative">Negative</span>
    </div>
    <div class="col-xs-12">
      <h2>Badges</h2>
      <button class="btn btn-positive" type="button">
        Messages <span class="badge">4</span>
      </button>
      <button class="btn btn-negative" type="button">
        Messages <span class="badge">4</span>
      </button>
    </div>
  </div>


  <!-- Page Header -->
  <div class="page-header">
    <h2>Page Header</h2>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="page-header">
        <h1>提交订单 <small>Subtext for header</small></h1>
      </div>
      <div class="page-header">
        <h2>提交订单 <small>Subtext for header</small></h2>
      </div>
      <div class="page-header">
        <h3>苹果 <small>（23个商品）</small></h3>
      </div>
      <div class="page-header">
        <h4>我的订单 <small>（23）</small></h4>
      </div>
      <div class="page-header">
        <h5>我的订单 <small>（23）</small></h5>
      </div>
      <div class="page-header">
        <h6>我的订单 <small>（23）</small></h6>
      </div>
    </div>
  </div>


  <!-- List -->
  <div class="page-header">
    <h2><a href="#list">List</a></h2>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="page-header">
        <h3>苹果 <small>（23）</small></h3>
      </div>

      <div class="list-filter">
        <dl class="dl-horizontal">
          <dt>分类：</dt>
          <dd>
            <a href="/Item/search.html" class="item">全部</a>
            <a href="/Item/search.html" class="item">荣华山地红富士</a>
            <a href="/Item/search.html" class="item">荣华轩辕翡翠梨</a>
            <a href="/Item/search.html" class="item">荣华户太八号</a>
            <a href="/Item/search.html" class="item">璀园葡萄酒</a>
          </dd>
        </dl>

        <dl class="dl-horizontal">
          <dt>尺码：</dt>
          <dd>
            <a href="/Item/search.html" class="item">全部</a>
            <a href="/Item/search.html" class="item">荣华山地红富士</a>
            <a href="/Item/search.html" class="item">荣华轩辕翡翠梨</a>
            <a href="/Item/search.html" class="item">荣华户太八号</a>
            <a href="/Item/search.html" class="item">璀园葡萄酒</a>
            <a href="/Item/search.html" class="item">荣华山地红富士</a>
            <a href="/Item/search.html" class="item">荣华轩辕翡翠梨</a>
            <a href="/Item/search.html" class="item">荣华山地红富士</a>
            <a href="/Item/search.html" class="item">荣华轩辕翡翠梨</a>
            <a href="/Item/search.html" class="item">荣华户太八号</a>
            <a href="/Item/search.html" class="item">璀园葡萄酒</a>
            <a href="/Item/search.html" class="item">荣华山地红富士</a>
            <a href="/Item/search.html" class="item">荣华轩辕翡翠梨</a>
          </dd>
        </dl>

        <dl class="dl-horizontal">
          <dt>品牌：</dt>
          <dd>
            <a href="/Item/search.html" class="item">全部</a>
            <a href="/Item/search.html" class="item">荣华山地红富士</a>
            <a href="/Item/search.html" class="item">荣华轩辕翡翠梨</a>
            <a href="/Item/search.html" class="item">荣华户太八号</a>
            <a href="/Item/search.html" class="item">璀园葡萄酒</a>
          </dd>
        </dl>
      </div>

      <ul class="list">
        <li class="list-item">Cras justo odio</li>
        <li class="list-item">Dapibus ac facilisis in</li>
        <li class="list-item">Morbi leo risus</li>
        <li class="list-item">Porta ac consectetur ac</li>
        <li class="list-item">Vestibulum at eros</li>
      </ul>

      <h4>List Active</h4>
      <div class="list">
        <a href="#" class="list-item active">
          Cras justo odio
        </a>
        <a href="#" class="list-item">Dapibus ac facilisis in</a>
        <a href="#" class="list-item">Morbi leo risus</a>
        <a href="#" class="list-item">Porta ac consectetur ac</a>
        <a href="#" class="list-item">Vestibulum at eros</a>
      </div>

      <h4>List Heading & Text</h4>
      <div class="list">
        <a href="#" class="list-item active">
          <h4 class="list-item-heading">List group item heading</h4>
          <p class="list-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        </a>
        <a href="#" class="list-item">
          <h4 class="list-item-heading">List group item heading</h4>
          <p class="list-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        </a>
        <a href="#" class="list-item">
          <h4 class="list-item-heading">List group item heading</h4>
          <p class="list-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        </a>
      </div>
    </div>
  </div>


  <!-- Media -->
  <div class="page-header">
    <h2><a href="#list">Media</a></h2>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </div>
      </div>

      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </div>
      </div>

      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </div>
      </div>

      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Nested media heading<a class="anchorjs-link" href="#nested-media-heading"><span class="anchorjs-icon"></span></a></h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

              <div class="media">
                <div class="media-left">
                  <a href="#">
                    <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
                  </a>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">Nested media heading<a class="anchorjs-link" href="#nested-media-heading"><span class="anchorjs-icon"></span></a></h4>
                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="media">
        <div class="media-body">
          <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
        </div>
        <div class="media-right">
          <a href="#">
            <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
      </div>

      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
        </div>
        <div class="media-right">
          <a href="#">
            <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
      </div>


    </div>
  </div>
  <div class="page-header">
    <h3><a href="#list">Media 对齐</a></h3>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading" id="top-aligned-media">Top aligned media<a class="anchorjs-link" href="#top-aligned-media"><span class="anchorjs-icon"></span></a></h4>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
          <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
      </div>
      <div class="media">
        <div class="media-left media-middle">
          <a href="#">
            <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading" id="middle-aligned-media">Middle aligned media<a class="anchorjs-link" href="#middle-aligned-media"><span class="anchorjs-icon"></span></a></h4>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
          <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
      </div>
      <div class="media">
        <div class="media-left media-bottom">
          <a href="#">
            <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading" id="bottom-aligned-media">Bottom aligned media<a class="anchorjs-link" href="#bottom-aligned-media"><span class="anchorjs-icon"></span></a></h4>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
          <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
      </div>
    </div>
  </div>
  

  <!-- List & Media -->
  <div class="page-header">
    <h2><a href="#list">List & Media</a></h2>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="list">
        <div class="list-item">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            </div>
          </div>
        </div>
        <div class="list-item">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            </div>
          </div>
        </div>
        <div class="list-item">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading" id="media-heading">Media heading<a class="anchorjs-link" href="#media-heading"><span class="anchorjs-icon"></span></a></h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
              <div class="media">
                <div class="media-left">
                  <a href="#">
                    <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
                  </a>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">Nested media heading<a class="anchorjs-link" href="#nested-media-heading"><span class="anchorjs-icon"></span></a></h4>
                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="__IMG__/thumbnail.png" data-holder-rendered="true" style="width: 64px; height: 64px;">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">Nested media heading<a class="anchorjs-link" href="#nested-media-heading"><span class="anchorjs-icon"></span></a></h4>
                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Thumbnails -->
  <div class="page-header">
    <h2><a href="#list">Thumbnails</a></h2>
  </div>
  <div class="page-header">
    <h4>图片</h4>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <img src="__IMG__/thumbnail.png" class="img-thumbnail" width="200">
      <img src="__IMG__/thumbnail.png" class="img-rounded" width="200">
      <img src="__IMG__/thumbnail.png" class="img-circle" width="200">
    </div>
  </div>

  <div class="page-header">
    <h4>默认样式</h4>
  </div>
  <div class="row">
    <div class="col-xs-3">
      <a href="#" class="thumbnail">
        <img src="__IMG__/thumbnail.png">
      </a>
    </div>
    <div class="col-xs-3">
      <a href="#" class="thumbnail">
        <img src="__IMG__/thumbnail.png">
      </a>
    </div>
    <div class="col-xs-3">
      <a href="#" class="thumbnail">
        <img src="__IMG__/thumbnail.png">
      </a>
    </div>
    <div class="col-xs-3">
      <a href="#" class="thumbnail">
        <img src="__IMG__/thumbnail.png">
      </a>
    </div>
  </div>

  <div class="page-header">
    <h4>自定义内容</h4>
  </div>
  <div class="row">
    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="__IMG__/thumbnail.png">
        <div class="caption">
          <h4 id="thumbnail-label">Thumbnail label<a class="anchorjs-link" href="#thumbnail-label"><span class="anchorjs-icon"></span></a></h4>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a href="#" class="btn btn-positive" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
        </div>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="__IMG__/thumbnail.png">
        <div class="caption">
          <h4 id="thumbnail-label">Thumbnail label<a class="anchorjs-link" href="#thumbnail-label"><span class="anchorjs-icon"></span></a></h4>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a href="#" class="btn btn-positive" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
        </div>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="__IMG__/thumbnail.png">
        <div class="caption">
          <h4 id="thumbnail-label">Thumbnail label<a class="anchorjs-link" href="#thumbnail-label"><span class="anchorjs-icon"></span></a></h4>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a href="#" class="btn btn-positive" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
        </div>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="__IMG__/thumbnail.png">
        <div class="caption">
          <h4 id="thumbnail-label">Thumbnail label<a class="anchorjs-link" href="#thumbnail-label"><span class="anchorjs-icon"></span></a></h4>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a href="#" class="btn btn-positive" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
        </div>
      </div>
    </div>
  </div>

  <!-- Alerts -->
  <div class="row">
    <div class="col-xs-12">
      <h2>Alerts</h2>
      <div class="alert alert-dismissable alert-warning">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <h4>Warning!</h4>
        <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="javascript:void(0)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
      </div>
    </div>
  </div>
  <!-- Alerts Other -->
  <div class="row">
    <div class="col-xs-4">
      <div class="alert alert-dismissable alert-danger">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>Oh snap!</strong> <a href="javascript:void(0)" class="alert-link">Change a few things up</a> and try submitting again.
      </div>
    </div>
    <div class="col-xs-4">
      <div class="alert alert-dismissable alert-success">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>Well done!</strong> You successfully read <a href="javascript:void(0)" class="alert-link">this important alert message</a>.
      </div>
    </div>
    <div class="col-xs-4">
      <div class="alert alert-dismissable alert-info">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>Heads up!</strong> This <a href="javascript:void(0)" class="alert-link">alert needs your attention</a>, but it's not super important.
      </div>
    </div>
  </div>

  <!-- Progress bars -->
  <div class="page-header">
    <h1>Progress bars</h1>
  </div>

  <h3>基础例子</h3>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>
  
  <h3>带有提示标签的进度条</h3>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
      60%
    </div>
  </div>

  <h3>根据情境变化效果</h3>
  <div class="progress">
    <div class="progress-bar progress-bar-positive" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">40% Complete (positive)</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-negative" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">40% Complete (negative)</span>
    </div>
  </div>

  <h3>条纹效果</h3>
  <div class="progress">
    <div class="progress-bar progress-bar-positive progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">40% Complete (positive)</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-negative progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">40% Complete (negative)</span>
    </div>
  </div>

  <h3>动画效果</h3>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
  </div>

  <h3>堆叠效果</h3>
  <div class="progress">
    <div class="progress-bar progress-bar-positive" style="width: 35%">
      <span class="sr-only">35% Complete (positive)</span>
    </div>
    <div class="progress-bar progress-bar-negative" style="width: 10%">
      <span class="sr-only">10% Complete (negative)</span>
    </div>
  </div>

</block>
<block name="script">
  <script type="text/javascript">
    seajs.use();
    var doConfirm = function(){
      alert('我是回调函数');
    }
  </script>
</block>